<script setup>
import { provide, ref } from 'vue'
import { collapseProps, collapseKey } from './props'
defineOptions({
  name: 'LeeCollapse',
})
const props = defineProps(collapseProps)
const emit = defineEmits(['update:modelValue', 'change'])
const actives = ref(props.modelValue)

const handleItemClick = name => {
  let _actives = [...actives.value]
  if (props.accordion) {
    // 手风琴模式
    _actives = [actives.value[0] === name ? '' : name]
  } else {
    const index = actives.value.indexOf(name)
    if (index > -1) {
      _actives.splice(index, 1)
    } else {
      _actives.push(name)
    }
  }
  actives.value = _actives
  emit('update:modelValue', _actives)
  emit('change', _actives)
}

provide(collapseKey, {
  activeNames: actives,
  handleItemClick,
})
</script>

<template>
  <div class="lee-collapse">
    <slot />
  </div>
</template>

<style scoped></style>
